<!-- 周边商城列表组件 -->

<template>
	<div class="commodity">
		<p>
			<h4>{{title}}</h4>
		</p>
		<ul>
			<li v-for="(item,path,index) in operate" :key="index">
				<router-link :to="{ path: item.path }">
					<span class="img">
						<img :src="item.imgSrc" alt="">
					</span>
					<p class="title" v-text="item.title"></p>
					<p class="num">
						<span v-text="item.num"></span>
						<span>.00</span></p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			operate: {
				type: Array,
			},
            title:{
                type:String,
            }
		},

		data() {
			return {

			};
		},
		// 截取字符长度
		filters: {
			filterFun: function(value) {
				if (value && value.length > 25) {
					value = value.substring(0, 25) + '...';
				}
				return value;
			}
		},
	}
</script>

<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";

	.commodity {
		padding: 0 15px;
		width: calc(100% - 30px);

		h4 {
			font-size: 17px;
			color: @base-black-color;
			text-align: center;
			font-weight: bold;
			display: inline-block;
			position: relative;
			margin-bottom: 40px;

			&:after {
				position: absolute;
				content: '';
				width: 15px;
				height: 4px;
				background: @base-blue-color;
				top: 0;
				left: 0;
				right: -97px;
				bottom: 0;
				margin: auto;
				border-radius: 2px;
			}

			&:before {
				position: absolute;
				content: '';
				width: 15px;
				height: 4px;
				background: @base-blue-color;
				top: 0;
				left: -97px;
				right: 0px;
				bottom: 0;
				margin: auto;
				border-radius: 2px;
			}
		}

		ul {
			flex-wrap: wrap;
			display: flex;
			justify-content: space-between;
			text-align: left;

			li {
				width: 155px;
				background: @base-list-black-color;
				margin-bottom: 20px;
				padding-bottom: 20px;

				.img {
					width: 100%;
					height: 150px;
					display: inline-block;
					margin-bottom: 10px;

					img {
						width: 100%;
						height: 100%;
					}
				}

				p {

					padding: 0 10px;
					height: 20px;
					margin-top: 5px;
					white-space: nowrap;
					overflow: hidden;
					width: calc(100% - 20px);
					text-overflow: ellipsis;

					&.title {
						font-size: 15px;
					}

					&.num {
						font-size: 15px;

						span {
							font-size: 12px;
							font-weight: bold;

							&:first-child {
								font-size: 14px;
							}
						}
					}
				}
			}
		}
	}
</style>
